/* eslint-disable */
import React, { Component } from 'react';
import styles from './index.less';
import { Carousel, Timeline, Row, Col } from 'antd';
import CockpitBox from '../../../components/cockpit/CockpitBox';
import Title from './Title';
import Detail from './Detail';
import ChartLine from './Charts/ChartLine';
import CockpitCarousel from '../../../components/cockpit/CockpitCarousel';
import ChartBar from './Charts/ChartBar';
import WarningInfo from './WarningInfo';
// // import LeftChartPie from './Charts/LeftChartPie';
// // import LeftChartBar from './Charts/LeftChartBar';
// // import LeftCenter4 from './Charts/LeftCenter4';
// // import LeftCenter5 from './Charts/LeftCenter5';
import MyIcon from '../../../components/common/MyIcon';
import CockpitSituational from '../../../components/cockpit/CockpitSituational';
import CockpitArrow from '../../../components/cockpit/CockpitArrow';
import Myshlaqy from '../Echarts/Myshlaqy';
import Myljfsfd from '../Echarts/Myljfsfd';
import request from '../../../utils/request';
class LeftContent extends Component {
  state = {
    flag: true,
    detailList: [
    ],
    gongsiFlag: true,
    detailList_getZhstgz: [
      [
        { label: '生活垃圾清运量', content: '1450', unit: '(吨)', span: 12, color: '#00FFDE' },
        { label: '生活垃圾进厂量', content: '100', unit: '(吨)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '生活垃圾焚烧量', content: '72', unit: '(吨)', span: 12, color: '#00C0FF' },
        { label: '生活垃圾焚烧发电量', content: '72', unit: '(吨)', span: 12, color: '#FFCB49', style: { marginRight: '15px' } },
        // { label: '预期效果', content: '实现生活垃圾趋零排放', span: 24, color: '#96CFFB' },
      ],
      [
        { label: '对外供热量', content: '1450', unit: '(吨)', span: 12, color: '#00FFDE' },
        { label: '污泥处置量', content: '100', unit: '(吨)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '餐厨垃圾处理量', content: '72', unit: '(吨)', span: 12, color: '#00C0FF' },
        // { label: '生活垃圾焚烧发电量', content: '72', unit: '(吨)', span: 12, color: '#FFCB49', style: { marginRight: '15px' } },
      ]
    ]
  }

  componentDidMount() {
    this.tsgz()//综合事态感知
  }
  tsgz = () => {
    request({
      url: '/sx-client/sx/onepic/tsgz',
      method: 'GET',
    }).then(data => {

      if (data.rc === 0) {
        let detailList_getZhstgz = [
          [
            { label: '生活垃圾清运量', content: data.ret.shljqyl, unit: '(吨)', span: 12, color: '#00FFDE' },
            { label: '生活垃圾进厂量', content: data.ret.shljjcl, unit: '(吨)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
            { label: '生活垃圾焚烧量', content: data.ret.shljfsl, unit: '(吨)', span: 12, color: '#00C0FF' },
            { label: '生活垃圾焚烧发电量', content: data.ret.ljfsfdl, unit: '(吨)', span: 12, color: '#FFCB49', style: { marginRight: '15px' } },
            // { label: '预期效果', content: '实现生活垃圾趋零排放', span: 24, color: '#96CFFB' },
          ],
          [
            { label: '对外供热量', content: data.ret.dwgrl, unit: '(吨)', span: 12, color: '#00FFDE' },
            { label: '污泥处置量', content: data.ret.wnczl, unit: '(吨)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
            { label: '餐厨垃圾处理量', content: data.ret.ccljczl, unit: '(吨)', span: 12, color: '#00C0FF' },
            // { label: '生活垃圾焚烧发电量', content: '72', unit: '(吨)', span: 12, color: '#FFCB49', style: { marginRight: '15px' } },
          ]
        ]

        this.setState({
          detailList_getZhstgz
        })
      }

    })
  }

  QieHuanTou = (type) => {


  }
  getContent = (key) => {
    const pieData = {
      data: [
        { value: 12, name: '机关' },
        { value: 20, name: '学校' },
        { value: 18, name: '企业' },
        { value: 18, name: '社区' },
        { value: 10, name: '家庭' },
        { value: 4, name: '商场' },
        { value: 3, name: '宾馆' },
        { value: 2, name: '其他' },
      ],
      legendData: { '机关': { ratio: '14.1%' }, '学校': { ratio: '23.5%' }, '企业': { ratio: '21.2%' }, '社区': { ratio: '18.8%' }, '家庭': { ratio: '11.8%' }, "商场": { ratio: '4.7%' }, '宾馆': { ratio: '3.5%' }, "其他": { ratio: '2.4%' } }
    };

    const xDataBar = ['1月', '2月', '3月', '4月', '5月', '6月'];
    let barData = [10, 9, 52, 73, 92, 38];

    return (
      <div>

        <CockpitSituational radius="130%" data={{ value: 300, name: '目标' }} />
        <div className={styles["line"]}></div>
        <div className={styles["LeftModdile"]}>
          <div className={styles["LeftModdile-cile"]}>
            {/* <LeftCenter4 onLeftCenter4={this.onLeftCenter4} /> */}
            <div className={styles["LeftModdile-cile-text"]}>
              <div>月进度</div>
              <div>环比</div>
              <div>同比</div>
            </div>
            <div className={styles["LeftModdile-cile-text"]}>
              <div>80.2%</div>
              <div><MyIcon className={'icon-shangsheng'} /> 1.3%</div>
              <div><MyIcon className={'icon-shangsheng'} /> 1.3%</div>
            </div>
          </div>
          <div className={styles["zuoheng"]}></div>
          <div className={styles["LeftModdile-cile"]}>
            {/* <LeftCenter5 onLeftCenter5={this.onLeftCenter5} /> */}
            <div className={styles["LeftModdile-cile-text"]}>
              <div>月进度</div>
              <div>环比</div>
              <div>同比</div>
            </div>
            <div className={styles["LeftModdile-cile-text"]}>
              <div>80.2%</div>
              <div><MyIcon className={'icon-shangsheng'} /> 1.3%</div>
              <div><MyIcon className={'icon-shangsheng'} /> 1.3%</div>
            </div>
          </div>
        </div>
        <div className={styles["line"]}></div>
        {/* <LeftChartBar xData={xDataBar} yLabel='达标 %' data={barData} title='每月细胞数' onLeftChartBar={this.onLeftChartBar} /> */}
        <div className={styles["line"]}></div>
        {/* <LeftChartPie detail={pieData} onLeftChartPie={this.onLeftChartPie} /> */}

      </div>
    )
  }

  getZhstgz = () => {

    const {detailList_getZhstgz}  = this.state


    return (
      <Carousel className={styles['process-supervision-carousel']} dots={true} autoplay={true}>
        {
          detailList_getZhstgz.map((ms, i) => (
            <Row gutter={16}>
              {
                ms.map((m, i) => (
                  <Col span={m.span} key={i}>{this.getBaseInfo(m.label, m.content, m.unit, m.color, m.noBorder)}</Col>
                ))
              }
            </Row>
          ))
        }

      </Carousel>
    )
  }

  getContent2 = (key) => {

    let shljData = [
      {
        title: <div><span style={{ color: this.state.flag ? '#fff' : 'red', cursor: 'pointer' }} onClick={this.QieHuanTou.bind(this, true)}>变废为宝</span>/<span onClick={this.QieHuanTou.bind(this, false)} style={{ color: !this.state.flag ? '#fff' : 'red', cursor: 'pointer' }}>它山之石</span></div>
      }, {
        detailList: this.state.detailList
      }
    ];

    let data = { 1: shljData };

    return (
      <div>
        {
          data[key].map((item, index) => (
            <div key={index} style={item.detailList && { paddingBottom: '20px' }}>
              {
                item.detailList &&
                <Carousel className={styles['process-supervision-carousel']} ref="welcome" dots={false} autoplay={true}>
                  {
                    item.detailList.map((data, i) => (
                      <div key={i} className={styles['warp']}>
                        <h2 className={styles["warp-title"]}>{data.title}</h2>
                        <a onClick={() => window.open(data.url)}><div className={styles["content-title"]}>{data.content}</div></a>
                        <img src={data.img} />
                      </div>
                    ))
                  }
                </Carousel>
              }


            </div>
          ))
        }
      </div>
    )
  }

  onMoreClick = (type) => {
    console.log(type)
    if (type) {
      this.setState({
        detailList: [
          {
            title: '千年御茶村',
            url: 'https://zj.zjol.com.cn/news/1335954.html',
            img: require("../../../assets/yuchacun.png"),
            content: '绍兴御茶村茶业有限公司在深耕“抹茶”产业的同时，不断加大技术投资，熟练掌握“输血”+“造血”本领，2017年承担市级科技计划项目“农业废弃物制作茶园有机肥技术与设备开发研究项目”项目实施二年内，自制生物有机肥...'
          },
          {
            title: '国际生态校',
            url: 'http://www.hcedu.cn/68/16886.html',
            img: require("../../../assets/shengtaixiao.png"),
            content: '11月14日，生态环境部“无废城市”建设试点工作调研组来到普陀路小学，就“无废细胞”建设情况开展现场调研。威海市政府副市长周永迪、威海市生态环境局局长毕建康、环翠区政府副区长沈艳萍、市生态环境局环翠...'
          }
        ]
      })
    } else {
      this.setState({
        detailList: [
          {
            title: '国际生态校',
            url: 'http://www.hcedu.cn/68/16886.html',
            img: require("../../../assets/shengtaixiao.png"),
            content: '11月14日，生态环境部“无废城市”建设试点工作调研组来到普陀路小学，就“无废细胞”建设情况开展现场调研。威海市政府副市长周永迪、威海市生态环境局局长毕建康、环翠区政府副区长沈艳萍、市生态环境局环翠...'
          },
          {
            title: '千年御茶村',
            url: 'https://zj.zjol.com.cn/news/1335954.html',
            img: require("../../../assets/yuchacun.png"),
            content: '绍兴御茶村茶业有限公司在深耕“抹茶”产业的同时，不断加大技术投资，熟练掌握“输血”+“造血”本领，2017年承担市级科技计划项目“农业废弃物制作茶园有机肥技术与设备开发研究项目”项目实施二年内，自制生物有机肥...'
          }

        ]
      })
    }
    this.setState({
      flag: !this.state.flag
    })

  }

  //左侧图表点击事件
  onLeftCenter4 = () => {
    this.props.onLeftCenter4()
  }

  //左侧图表点击事件
  onLeftCenter5 = () => {
    this.props.onLeftCenter5()
  }

  //左侧无废细胞
  onLeftChartPie = (name) => {
    this.props.onLeftChartPie(name)
  }

  //左侧每月细胞数
  onLeftChartBar = (params) => {
    this.props.onLeftChartBar(params)

  }

  //
  // 基础信息公用模板
  getBaseInfo = (
    name,
    text,
    unit,
    color,
    noBorder,
    className = "",
    style = {}
  ) => {
    return (
      <div
        className={
          styles["base-info-wrapper"] +
          " " +
          className +
          " " +
          (noBorder ? styles["no-border"] : "")
        }
        style={style}
      >
        {name && <div className={styles["name"]}>{name}</div>}
        {text && (
          <div className={styles["text"]} style={{ color }}>
            {text}
          </div>
        )}
        {unit && <div className={styles["unit"]}>{unit}</div>}
      </div>
    );
  };

  // 项目基础信息
  getXiangMuXX = () => {
    const data = this.choosePos || {};
    return (
      <CockpitBox
        title="项目基础信息"
        icon="icon-bancai-"
        className={styles["xiang-mu-xx-wrapper"]}
      >
        <div className={styles["inner"]}>
          {this.getBaseInfo(
            "项目名称",
            data.title || "嵊州市垃圾焚烧厂项目",
            "",
            "#43DDFF"
          )}
          <div className={styles["row"]}>
            {this.getBaseInfo("建设规模", "800", "(吨/日)", "#72FF85")}
            {this.getBaseInfo("责任单位", "嵊州市政府", "", "#00FFDE")}
          </div>
          <div className={styles["row"]}>
            {this.getBaseInfo("投资金额", "35000", "(万元)", "#FFCB49")}
            {this.getBaseInfo("占地面积", "135", "(亩)", "#00C0FF")}
          </div>
          {this.getBaseInfo(
            "预期效果",
            data.desire || "实现生活垃圾趋零排放",
            "",
            "#FF9249"
          )}
        </div>
      </CockpitBox>
    );
  };


  // 点位信息详情
  getPointDetail = (type) => {
    let detailList = {
      'qnhb': [
        { label: '公司名称', content: '绍兴市清能环保有限公司', span: 24, color: '#96CFFB' },
        // { label: '负责人', content: '刘秀', span: 12, color: '#74EDBB' },
        // { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696', style: { marginRight: '15px' } },
        { label: '处理类型', content: '生活垃圾', unit: '', span: 12, color: '#00FFDE' },
        { label: '建设规模', content: '800吨/日', unit: '', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '投产时间', content: '2016年12月', unit: '', span: 12, color: '#00C0FF' },
        { label: '占地面积', content: '135亩', unit: '', span: 12, color: '#FFCB49', style: { marginRight: '15px' } },
        { label: '公司地址', content: '浙江省绍兴市袍江工业区斗门镇荷湖村', span: 24, color: '#96CFFB' },
      ],
      'qiye': [
        { label: '投放点名称', content: '星桥社区生活垃圾分类投放点', span: 24, color: '#96CFFB' },
        { label: '投放地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '责任单位', content: '中兴街道居委会', span: 24, color: '#FFCB49', style: { marginRight: '15px' } },
        { label: '负责人', content: '刘秀', span: 12, color: '#74EDBB' },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696', style: { marginRight: '15px' } },
        { label: '最大投放量', content: '12', unit: '(吨)', span: 12, color: '#00FFDE' },
        { label: '当日投放量', content: '5.2', unit: '(吨)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '干垃圾', content: '2.8', unit: '(吨)', span: 12, color: '#00C0FF' },
        { label: '湿垃圾', content: '1.4', unit: '(吨)', span: 12, color: '#FFCB49', style: { marginRight: '15px' } },
        { label: '有害垃圾', content: '0.6', unit: '(吨)', span: 12, color: '#426ADC' },
        { label: '可回收垃圾', content: '0.4', unit: '(吨)', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
      ],
      'quyuQiye': [
        { label: '投放点名称', content: '星桥社区生活垃圾分类投放点', span: 24, color: '#96CFFB' },
        { label: '投放地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '责任单位', content: '中兴街道居委会', span: 24, color: '#FFCB49', style: { marginRight: '15px' } },
        { label: '负责人', content: '刘秀', span: 12, color: '#74EDBB' },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696', style: { marginRight: '15px' } },
        { label: '最大投放量', content: '12', unit: '(吨)', span: 12, color: '#00FFDE' },
        { label: '当日投放量', content: '5.2', unit: '(吨)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '干垃圾', content: '2.8', unit: '(吨)', span: 12, color: '#00C0FF' },
        { label: '湿垃圾', content: '1.4', unit: '(吨)', span: 12, color: '#FFCB49', style: { marginRight: '15px' } },
        { label: '有害垃圾', content: '0.6', unit: '(吨)', span: 12, color: '#426ADC' },
        { label: '可回收垃圾', content: '0.4', unit: '(吨)', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
      ],
      'xuexiao': [
        { label: '小区名称', content: '星桥嘉苑', span: 24, color: '#96CFFB' },
        { label: '居民数量', content: '621', unit: '(人)', span: 24, color: '#426ADC' },
        { label: '小区地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#FFCB49' },
        { label: '负责人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日垃圾产生量', content: '9.3', unit: '(吨)', span: 12, color: '#00FFDE', style: { marginRight: '15px' } },
        { label: '当日垃圾收运量', content: '5.2', unit: '(吨)', span: 12, color: '#00C0FF' },
        { label: '人均垃圾产生量', content: '1.09', unit: '(Kg/人天)', span: 12, color: '#00C0FF' },
      ],
      'quyuXuexiao': [
        { label: '小区名称', content: '星桥嘉苑', span: 24, color: '#96CFFB' },
        { label: '居民数量', content: '621', unit: '(人)', span: 24, color: '#426ADC' },
        { label: '小区地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#FFCB49' },
        { label: '负责人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日垃圾产生量', content: '9.3', unit: '(吨)', span: 12, color: '#00FFDE', style: { marginRight: '15px' } },
        { label: '当日垃圾收运量', content: '5.2', unit: '(吨)', span: 12, color: '#00C0FF' },
        { label: '人均垃圾产生量', content: '1.09', unit: '(Kg/人天)', span: 12, color: '#00C0FF' },
      ],
      'shequ': [
        { label: '中转名称', content: '南信中转站', span: 24, color: '#96CFFB' },
        { label: '中转站地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '负责人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日生活垃圾入站量', content: '9.3', unit: '(吨)', span: 12, color: '#00FFDE', style: { marginRight: '15px' } },
        { label: '入站车次', content: '23', unit: '(次)', span: 12, color: '#00C0FF' },
        { label: '当日生活垃圾出站量', content: '9.1', unit: '(吨)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '出站车次', content: '25', unit: '(次)', span: 12, color: '#FFCB49' },
      ],
      "quyuShequ": [
        { label: '中转名称', content: '南信中转站', span: 24, color: '#96CFFB' },
        { label: '中转站地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '负责人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日生活垃圾入站量', content: '9.3', unit: '(吨)', span: 12, color: '#00FFDE', style: { marginRight: '15px' } },
        { label: '入站车次', content: '23', unit: '(次)', span: 12, color: '#00C0FF' },
        { label: '当日生活垃圾出站量', content: '9.1', unit: '(吨)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '出站车次', content: '25', unit: '(次)', span: 12, color: '#FFCB49' },
      ],
      'jiguan': [
        { label: '企业名称', content: '全球通运输公司', span: 24, color: '#96CFFB' },
        { label: '企业地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '企业信用', content: '92', unit: '(分)', span: 24, color: '#FFCB49' },
        { label: '负责人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '运输车辆', content: '73', unit: '(辆)', span: 12, color: '#00FFDE', style: { marginRight: '15px' } },
        { label: '驾驶员', content: '74', unit: '(名)', span: 12, color: '#00C0FF' },
        { label: '当日运输车次', content: '54', unit: '(次)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '当日运输量', content: '1.4', unit: '(吨)', span: 12, color: '#FFCB49' },
      ],
      'cunzhen': [
        { label: '车牌号', content: '浙D21RX3', span: 24, color: '#96CFFB' },
        { label: '所属公司', content: '全球通运输公司', span: 12, color: '#426ADC', style: { marginRight: '15px' } },
        { label: '企业信用', content: '92分', span: 12, color: '#FFCB49' },
        { label: '公司地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '驾驶员', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日生活垃圾运输量', content: '9.3', unit: '(吨)', span: 24, color: '#00FFDE' },
        { label: '当日运输车次', content: '3', unit: '(次)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '当日行驶里程', content: '123', unit: '(km)', span: 12, color: '#00C0FF' },
      ],
      'fandian': [
        { label: '企业名称', content: '清能环保有限公司', span: 24, color: '#96CFFB' },
        { label: '企业地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '企业信用', content: '92', unit: '(分)', span: 24, color: '#FFCB49' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日生活垃圾入厂量', content: '1234', unit: '(吨)', span: 24, color: '#00FFDE', style: { marginRight: '15px' } },
        { label: '当日生活垃圾处置量', content: '1321', unit: '(吨)', span: 12, color: '#00C0FF' },
        { label: '废水达标排放率', content: '100', unit: '(%)', span: 12, color: '#00C0FF', style: { marginRight: '15px' } },
        { label: '废气达标排放量', content: '100', unit: '(%)', span: 12, color: '#00C0FF' },
      ],
      'jimaoshichang': [
        { label: '建筑工地地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '责任单位', content: '中兴街道居委会', span: 24, color: '#FFCB49' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日建筑垃圾产量', content: '182', unit: '(吨)', span: 24, color: '#00FFDE' },
        { label: '当日建筑垃圾清运量', content: '173', unit: '(吨)', span: 24, color: '#00C0FF' },
        { label: '当日建筑垃圾清运车次', content: '11', unit: '(次)', span: 24, color: '#00C0FF' },
      ],
      'jiating': [
        { label: '园区名称', content: '绍兴市上虞区精细化工园区', span: 24, color: '#96CFFB' },
        { label: '园区地址', content: '绍兴市上虞区', span: 24, color: '#426ADC' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日工业固废产生量', content: '382', unit: '(吨)', span: 24, color: '#00FFDE' },
        { label: '当日工业固废运输量', content: '343', unit: '(吨)', span: 24, color: '#00C0FF' },
        { label: '当日工业固废运输车次', content: '19', unit: '(次)', span: 12, color: '#00C0FF' },
      ],
      'shangchang': [
        { label: '企业名称', content: '清能有限公司', span: 24, color: '#96CFFB' },
        { label: '企业地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '企业信用', content: '92', unit: '(分)', span: 24, color: '#FFCB49' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13548114522', span: 12, color: '#FBD696' },
        { label: '当日工业固废产生量', content: '182', unit: '(吨)', span: 24, color: '#00FFDE' },
        { label: '当日工业固废运输量', content: '173', unit: '(吨)', span: 24, color: '#00C0FF' },
        { label: '当日工业固废运输车次', content: '19', unit: '(次)', span: 12, color: '#00C0FF' },
      ],
      'yyzs': [
        { label: '企业名称', content: '第一医院', span: 24, color: '#96CFFB' },
        { label: '企业地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '企业信用', content: '92', unit: '(分)', span: 24, color: '#FFCB49' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13948484848', span: 12, color: '#FBD696' },
        { label: '当日危险废物产生量', content: '182', unit: '(吨)', span: 24, color: '#00FFDE' },
        { label: '当日危险废物运输量', content: '173', unit: '(吨)', span: 24, color: '#00C0FF' },
        { label: '当日危险废物贮存量', content: '0.02', unit: '(吨)', span: 12, color: '#00C0FF' },
      ],
      'kyys': [
        { label: '科研院所名称', content: '曙光公司', span: 24, color: '#96CFFB' },
        { label: '科研院所地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '科研院所信用', content: '92', unit: '(分)', span: 24, color: '#FFCB49' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13948484848', span: 12, color: '#FBD696' },
        { label: '当日危险废物产生量', content: '182', unit: '(吨)', span: 24, color: '#00FFDE' },
        { label: '当日危险废物运输量', content: '173', unit: '(吨)', span: 24, color: '#00C0FF' },
        { label: '当日危险废物贮存量', content: '0.03', unit: '(吨)', span: 12, color: '#00C0FF' },
      ],
      'hgqy': [
        { label: '企业名称', content: '曙光公司', span: 24, color: '#96CFFB' },
        { label: '企业地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '企业信用', content: '92', unit: '(分)', span: 24, color: '#FFCB49' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13948484848', span: 12, color: '#FBD696' },
        { label: '当日危险废物产生量', content: '182', unit: '(吨)', span: 24, color: '#00FFDE' },
        { label: '当日危险废物运输量', content: '173', unit: '(吨)', span: 24, color: '#00C0FF' },
        { label: '当日危险废物运输车次', content: '11', unit: '(次)', span: 12, color: '#00C0FF' },
      ],
      'zdnh': [
        { label: '户主名称', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13948484848', span: 12, color: '#FBD696' },
        { label: '居住地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '户主信用', content: '99', unit: '(分)', span: 24, color: '#FFCB49' },
        { label: '企业名称', content: '曙光公司', span: 24, color: '#96CFFB' },
        { label: '畜禽养殖', content: '983', unit: '(头)', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '耕地面积', content: '61', unit: '(亩)', span: 12, color: '#FBD696' },
        { label: '畜禽粪便产量', content: '40', unit: '(kg)', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '秸秆产量', content: '0', unit: '(kg)', span: 12, color: '#FBD696' },
        { label: '农膜产量', content: '2.1', unit: '(kg)', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '农药包装物产量', content: '0', unit: '(kg)', span: 12, color: '#FBD696' },
      ],
      'yzc': [
        { label: '户主名称', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13948484848', span: 12, color: '#FBD696' },
        { label: '养殖场地址', content: '绍兴市上虞区小康村', span: 24, color: '#426ADC' },
        { label: '畜禽养殖', content: '2183', unit: '(头)', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '耕地面积', content: '0', unit: '(亩)', span: 12, color: '#FBD696' },
        { label: '畜禽粪便产量', content: '827', unit: '(kg)', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '秸秆产量', content: '0', unit: '(kg)', span: 12, color: '#FBD696' },
        { label: '农膜产量', content: '0', unit: '(kg)', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '农药包装物产量', content: '0', unit: '(kg)', span: 12, color: '#FBD696' },
      ],
      'sjd': [
        { label: '收集点名称', content: '小康农业废弃物收集点', span: 24, color: '#426ADC' },
        { label: '收集点地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13948484848', span: 12, color: '#FBD696' },
        { label: '当日农膜收集量', content: '1.45', unit: '(吨)', span: 24, color: '#FBD696' },
        { label: '当日农药废弃包装物收集量', content: '1.45', unit: '(吨)', span: 24, color: '#426ADC' },
      ],
      'sxj': [
        { label: '摄像头编号', content: 'SP1102', span: 24, color: '#426ADC' },
        { label: '部署地址', content: '绍兴市上虞区中兴街道全心路', span: 24, color: '#426ADC' },
        { label: '责任部门', content: '监察部门', span: 24, color: '#426ADC' },
        { label: '责任人', content: '刘秀', span: 12, color: '#74EDBB', style: { marginRight: '15px' } },
        { label: '联系方式', content: '13948484848', span: 12, color: '#FBD696' },
      ],
      'yuanQu': [
        { label: '细胞名称', content: '诸暨市绿色循环园区', span: 24, color: '#FFCB49' },
        { label: '细胞分类', content: '园区', span: 24, color: '#426ADC' },
        { label: '园区规模', content: '终端处置厂8个\n资源利用厂2个', span: 24, color: '#74EDBB' },
        { label: '企业地址', content: '浙江省诸暨市绿色循环园区', span: 24, color: '#FBD696' },
        { label: '是否为示范细胞', content: '是', span: 12, color: '#74EDBB', noBorder: true },
        { label: '联系方式', content: '136****2868', span: 12, color: '#FBD696', noBorder: true },
      ],
      'xibao': [
        { label: '细胞名称', content: '嵊州市垃圾焚烧厂项目', span: 24, color: '#FFCB49' },
        { label: '细胞分类', content: '企业', span: 24, color: '#426ADC' },
        { label: '企业规模', content: '800吨/日 生活垃圾', span: 24, color: '#74EDBB' },
        { label: '企业地址', content: '浙江省嵊州市蛟镇村', span: 24, color: '#FBD696' },
        { label: '是否为示范细胞', content: '否', span: 12, color: '#74EDBB', noBorder: true },
        { label: '联系方式', content: '136****2868', span: 12, color: '#FBD696', noBorder: true },
      ],
      'xibaoMoFan': [
        { label: '细胞名称', content: '绍兴御茶村茶业有限公司', span: 24, color: '#FFCB49' },
        { label: '细胞分类', content: '企业', span: 24, color: '#426ADC' },
        { label: '企业规模', content: '年产干茶3500吨', span: 24, color: '#74EDBB' },
        { label: '企业地址', content: '浙江省绍兴市富盛镇御茶村', span: 24, color: '#FBD696' },
        { label: '是否为示范细胞', content: '是', span: 12, color: '#74EDBB', noBorder: true },
        { label: '联系方式', content: '137xxxx2967', span: 12, color: '#FBD696', noBorder: true },
      ]
    }
    const xDataBar = ['1月', '2月', '3月', '4月', '5月', '6月'];
    let barData = [10283, 9219, 10120, 9873, 9902, 9738];

    if (!detailList[type]) return
    return (
      <Row gutter={16}>
        {
          (detailList[type] || []).map((m, i) => (
            <Col span={m.span} key={i}>{this.getBaseInfo(m.label, m.content, m.unit, m.color, m.noBorder)}</Col>
          ))
        }
      </Row>
    )
  }

  getJdItem = (name, time, icon, iconColor, color, finished) => {
    return (
      <Timeline.Item
        className={finished ? "jd-finish" : ""}
        dot={
          <MyIcon
            type={icon}
            style={{
              fontSize: "23px"
            }}
          />
        }
        color={iconColor}
      >
        <div className={styles["name"]} style={{ color }}>
          {name}
        </div>
        <div className={styles["time"]} style={{ color }}>
          {time}
        </div>
      </Timeline.Item>
    );
  };

  // 项目推进进度
  getXiangMuJD = () => {
    return (
      <CockpitBox
        title="项目推进进度"
        icon="icon-bancai-"
        className={styles["xiang-mu-JD-wrapper"]}
      >
        <Timeline className={styles["inner"]}>
          {this.getJdItem(
            "立项",
            "2019-11-12",
            "icon-lixiang",
            "#0D1E2E",
            "#fff",
            true
          )}
          {this.getJdItem(
            "可行性研究",
            "2020-1-12",
            "icon-fdj",
            "#0D1E2E",
            "#00C5FF",
            true
          )}
          {this.getJdItem("初步设计", "", "icon-sheji", "#2792B1", "#727e8a", false)}
          {this.getJdItem(
            "项目实施管理",
            "",
            "icon-xiangmu",
            "#2792B1",
            "#727e8a",
            false
          )}
          {this.getJdItem(
            "项目竣工验收",
            "",
            "icon-yanshou",
            "#2792B1",
            "#727e8a",
            false
          )}
        </Timeline>
        ,
        </CockpitBox>
    );
  };

  // 园区项目推进进度
  getYuanQuXiangMuJD = () => {
    let down = (time) => (
      <span style={{ display: "inline-block", width: '100%' }}>
        {time}
        <span
          style={{ color: "#00c5ff", cursor: 'pointer', textAlign: 'right', width: "60%", display: "inline-block" }}
        >
          附件下载
        </span>
      </span>
    )
    return (
      <CockpitBox
        title="项目推进进度"
        icon="icon-bancai-"
        className={styles["xiang-mu-JD-wrapper"]}
      >
        <Timeline className={styles["inner"]}>
          {this.getJdItem("立项", down("2019-11-12"), "icon-lixiang", "#0D1E2E", "#fff", true)}
          {this.getJdItem("可行性研究", down("2020-01-12"), "icon-fdj", "#0D1E2E", "#00C5FF", true)}
          {this.getJdItem("项目审批", down("2020-03-15"), "icon-sheji", "#0D1E2E", "#00C5FF", true)}
          {this.getJdItem("实施管理", down("2020-08-15"), "icon-xiangmu", "#0D1E2E", "#00C5FF", true)}
          {this.getJdItem("竣工验收", down("2020-12-11"), "icon-yanshou", "#0D1E2E", "#00C5FF", true)}
        </Timeline>
        <div></div>
      </CockpitBox>
    );
  }

  getBottomContent = () => {
    let { type = 1, pointType } = this.props;
    let style = {
      marginBottom: 10
    }
    const { gongsiFlag } = this.state

    if (pointType === 'qnhb') {
      return (
        <div>
          <CockpitBox
            className={styles['left-content-box']}
            title='基础信息'
            icon="icon-bancai-"
            style={style}

          >
            {this.getPointDetail(pointType)}
          </CockpitBox>

          <CockpitBox
            className={styles['left-content-box']}
            title={gongsiFlag ? '公司图片' : '现场视频'}
            icon="icon-bancai-"
            style={style}
            rightRender={<span style={{ color: '#fff', cursor: 'pointer' }} onClick={this.ongongsiFlag} >{gongsiFlag ? '视频' : '图片'}</span>}
          >
            {
              gongsiFlag ?
                this.getXiangMuTP() :
                this.getXiangMuSP()
            }
          </CockpitBox>
        </div>
      )
    }
  }

  ongongsiFlag = () => {
    this.setState({
      gongsiFlag: !this.state.gongsiFlag
    })
  }

  // 项目现场图片
  getXiangMuTP = (img, title) => {
    let t = this;
    let onClick = () => {
      t.props.getImgInfo();
    }
    return (
      <Carousel className={styles['process-supervision-carousel']} dots={true} autoplay={true}>
        <div className={styles["xiang-mu-tp-wrapper"]}>
          <div className={styles["inner"]}>
            <img src={img || require("../../../assets/devote-3.png")} />
          </div>
        </div>

        <div className={styles["xiang-mu-tp-wrapper"]}>
          <div className={styles["inner"]}>
            <img src={img || require("../../../assets/devote-3.png")} />
          </div>
        </div>
      </Carousel>

    )
  }

  // 项目现场视频
  getXiangMuSP = () => {
    return (

      <div className={styles["xiang-mu-sp-wrapper"]}>
        <div className={styles["inner"]}>
          <div className={styles["row"]}>
            <video src={require("../../../assets/video/dwjsd.mp4")} controls></video>
          </div>
          <div className={styles["line"]}></div>
        </div>
      </div>
    )
  }

  render() {
    let t = this;
    let { type = 1, pointType } = t.props;
    let style = {
      marginBottom: 10
    }
    return (
      <div className={styles['left-content']}>
        {
          pointType == undefined ?
            <div>

              <CockpitBox
                className={styles['left-content-box']}
                title='综合势态感知'
                icon="icon-xibao_cellscopy"
                style={{ marginBottom: 10 }}
              >
                {t.getZhstgz(type)}
              </CockpitBox>


              <CockpitBox
                className={styles['left-content-box']}
                title={'生活垃圾清运'}
                icon="icon-zhishu"
                style={{ marginBottom: 10 }}
              // rightRender={<CockpitArrow onClick={t.onMoreClick.bind(this, !t.state.flag)} title={!t.state.flag ? '变废为宝' : '它山之石'} />}
              >
                <Myshlaqy />
              </CockpitBox>

              <CockpitBox
                className={styles['left-content-box']}
                title={'垃圾焚烧发电'}
                icon="icon-zhishu"
              // rightRender={<CockpitArrow onClick={t.onMoreClick.bind(this, !t.state.flag)} title={!t.state.flag ? '变废为宝' : '它山之石'} />}
              >
                <Myljfsfd />
              </CockpitBox>
            </div> :
            <div>
              {this.getBottomContent()}

            </div>
        }
      </div>
    )
  }
}

export default LeftContent;
